import React, {
	PureComponent
} from 'react';
import {
	connect
} from 'react-redux';
import {
	WriterWrapper,
	WriterHeader,
	WriteTitle,
	WriterInfo,
	WriteChange,
	WriterList
} from '../style';

class Writer extends PureComponent {
	render() {
		const {
			list
		} = this.props;
		return (
			<WriterWrapper>
				<WriterHeader>
					<WriteTitle>推荐作者</WriteTitle>
					<WriteChange>
						<span className = 'iconfont spin' >&#xe851;</span>
						换一批
					</WriteChange>
				</WriterHeader>
				{
					list.map((item)=>(
						<WriterList key={item.get('id')}>
							<img className = 'writer-img' src={item.get('imgUrl')} alt='' />
							<WriterInfo>
								<h3 className = 'writerName'>{item.get('name')}</h3>
								<p className = 'writerDetail'>{item.get('desc')}</p>
							</WriterInfo>
							<i className = 'writerOpr'>加关注</i>
						</WriterList>
					))	
				}
			</WriterWrapper>
		)
	}
}

const mapStateToProps = (state) => ({
	list: state.getIn(['home', 'writerList'])
})

export default connect(mapStateToProps, null)(Writer);